import React, { useState } from 'react';
import { Form, Radio, Checkbox, Button, message } from 'antd';
import { Question } from '@/types/question';
import { questionService } from '@/services/questionService';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import styles from './QuestionForm.module.css';

interface Props {
  question: Question;
}

const QuestionForm: React.FC<Props> = ({ question }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (values: any) => {
    try {
      setLoading(true);
      await questionService.submitAnswer({
        question: question.id,
        answer: values.answer,
      });
      message.success('提交成功');
    } catch (error) {
      message.error('提交失败');
    } finally {
      setLoading(false);
    }
  };

  const renderQuestionContent = () => {
    switch (question.type) {
      case 'single':
        return (
          <Form.Item name="answer" rules={[{ required: true }]}>
            <Radio.Group>
              {Array.isArray(question.choices) && question.choices.length > 0 ? (
                question.choices.map(choice => (
                  <Radio key={choice.id} value={choice.id}>
                    {choice.content}
                  </Radio>
                ))
              ) : (
                <div>暂无选项</div>
              )}
            </Radio.Group>
          </Form.Item>
        );

      case 'multiple':
        return (
          <Form.Item name="answer" rules={[{ required: true }]}>
            <Checkbox.Group>
              {Array.isArray(question.choices) && question.choices.length > 0 ? (
                question.choices.map(choice => (
                  <Checkbox key={choice.id} value={choice.id}>
                    {choice.content}
                  </Checkbox>
                ))
              ) : (
                <div>暂无选项</div>
              )}
            </Checkbox.Group>
          </Form.Item>
        );

      case 'true_false':
        return (
          <Form.Item name="answer" rules={[{ required: true }]}>
            <Radio.Group>
              <Radio value={true}>正确</Radio>
              <Radio value={false}>错误</Radio>
            </Radio.Group>
          </Form.Item>
        );

      case 'code_reading':
        return (
          <>
            <div className={styles.codeBlock}>
              <CodeMirror
                value={question.code || ''}
                height="200px"
                extensions={[javascript()]}
                editable={false}
              />
            </div>
            {/* 根据具体题目要求渲染不同的答题表单 */}
          </>
        );

      default:
        return null;
    }
  };

  return (
    <Form form={form} onFinish={handleSubmit} className={styles.form}>
      {renderQuestionContent()}
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading}>
          提交答案
        </Button>
      </Form.Item>
    </Form>
  );
};

export default QuestionForm; 